<template>
	<view>
		<!-- <view>
			<view style="padding:30rpx;font-size:38rpx;font-weight:bold;padding-bottom:0rpx;">购买会员</view>
			<view style="padding:20rpx;">
				<view v-for="(item,index) in BuyMemberSet" :key="index" class="rechargePrice" @click="changeSelect(0,index)" :style="{border:(currentType == 0&&currentSelect == index?'1rpx solid #FF6600':'1rpx solid #CCC')}">
					<text>{{item.title}}</text><br>
					<text>{{item.price*100/100}}元送{{item.money*100/100}}金币</text>
				</view>
			</view>
		</view> -->

		<view>
			<view style="padding:30rpx;font-size:38rpx;font-weight:bold;padding-bottom:0rpx;">充值金币</view>
			<view style="padding:30rpx;display: flex;flex-direction: row;flex-wrap: wrap;">
				<view v-for="(item,index) in WalletReChargeSet" :key="index" class="rechargePrice"
					@click="changeSelect(index)"
					:style="{backgroundColor:(currentType == 1 && currentSelect == index ? '#FFDD00' : '#fff')}">
					<view class="zhekou" v-if="item.zhekou != 10">
						<text>{{item.zhekou}}</text><text style="margin-left: 5rpx;">折</text>
					</view>
					<text style="font-size: 42rpx;">{{item.money*100/100}}<text
							style="font-size: 26rpx;">金币</text></text><br>
					<text style="font-size: 26rpx;color: #999;margin-top: 12rpx;">{{item.price*100/100}}元</text>
				</view>
			</view>


			<view style="font-size: 24rpx;line-height: 42rpx;color: #aaaaaa;padding: 30rpx;">
				<view> 温馨提示: </view>
				<view> 1.金币为本平台向您提供的用于在本平台上进行相关消费的虚拟货币，充值成功后不支持兑换人民币、转让，不支持退款，充值前请慎重选择。</view>
				<view> 2.金币可购买的产品/服务范围以本平台相关页面展示的可使用金币购买的产品/服务为准。</view>
				<view> 3.美模不鼓励未成年人使用充值服务。</view>
				<view> 充值即代表同意平台<text style="color: #00aaff;"
						@click="$common.goNavPage('/pages/content?cid=4');">《用户充值协议》</text></view>
			</view>
		</view>
		<!-- <view>
			选择支付方式：
		</view> -->


		<fui-toast ref="toast"></fui-toast>
		<view>
			<button class="sub-btn rechargeBtn" @click="rechargeHandle">立即支付</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				BuyMemberSet: [],
				WalletReChargeSet: [],
				currentType: 1,
				currentSelect: -1,
				payPrice: 0
			};
		},
		onShow() {
			if (!uni.getStorageSync('ReChargeUrl')) {
				uni.setStorageSync('ReChargeUrl', '/myPages/pages/myWallet')
			}
			this.getReCharge();
		},
		methods: {
			getReCharge() {
				this.$httpost('/UserCenter/WalletReChargeSet', {}).then(res => {
					// console.log('WalletReChargeSet', res);					
					if (res.code == 200) {
						this.WalletReChargeSet = res.data.WalletReChargeSet
					}
				});
			},
			changeSelect(index) {
				this.currentSelect = index
				this.payPrice = this.WalletReChargeSet[index].price
			},
			rechargeHandle() {

				if (this.currentSelect == -1) {
					uni.showToast({
						title: '请选择充值金额',
						icon: 'error'
					})
				} else {



					let timeStamp = new Date().getTime();

					// console.log(timeStamp);

					let _that = this;

					// _that.PaymentOk(1,15, 'requestPayment:test');

					// return false;

					this.$httpost('/Wechat/Pay', {
						reChargeType: this.currentType,
						reChargeIndex: this.currentSelect
					}).then(res => {
						// console.log(res)

						let payConfig = res.data.config
						let payOrderID = res.data.payorderid

						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: payConfig.timeStamp,
							nonceStr: payConfig.nonceStr,
							package: payConfig.package,
							signType: payConfig.signType,
							paySign: payConfig.paySign,
							success: function(payRes) {
								// console.log(payRes.errMsg);

								if (payRes.errMsg == 'requestPayment:ok') {
									_that.PaymentOk(1, payOrderID, payRes.errMsg);
								} else {
									_that.PaymentOk(2, payOrderID, payRes.errMsg);
								}
							},
							fail: function(err) {
								// console.log(err);
								_that.PaymentOk(4, payOrderID, err);
							}
						});

					});
				}
			},
			PaymentOk(state, payOrderID, errMsg) {
				// console.log('payOrderID', payOrderID);

				this.$httpost('/Wechat/PayResult', {
					payState: state,
					payOrderID: payOrderID,
					errMsg: errMsg
				}).then(res => {
					// console.log('PayResult', res)

					if (res.code == 200) {
						if (res.data.PayState == 1) {
							this.showToast(1);

							uni.navigateBack();

							// uni.navigateTo({
							// 	url: uni.getStorageSync('ReChargeUrl') // '/myPages/pages/myWallet'
							// })
						}
					}
				});
			},
			showToast(type) {
				let options = {}

				if (type == 1) {
					//提示信息
					options.text = '支付成功';
					//图标图片地址
					options.src = this.$baseUrl + "icon/success.png";
				}

				this.$refs.toast.show(options)
			}
		}
	}
</script>

<style lang="scss">
	.rechargePrice {
		position: relative;
		width: calc((100% - 35rpx) / 2);
		background-color: #fff;
		border-radius: 10rpx;
		text-align: center;
		padding: 50rpx 0;
		margin-right: 30rpx;
		margin-top: 30rpx;
		box-sizing: border-box;
		border: 2rpx solid #FFDD00;

		&:nth-child(2n) {
			margin-right: 0;
		}

		// rgb(253,150,78)

	}

	.zhekou {
		position: absolute;
		top: 0;
		right: 0;
		// background-color: #FF0000;
		background-image: linear-gradient(to right, #fd964e, #ff3616);
		color: #FFF;
		font-size: 20rpx;
		padding: 5rpx 15rpx;
		border-radius: 0 8rpx 0 8rpx;
		z-index: 9;
	}

	.rechargeBtn {
		position: fixed;
		z-index: 100;
		bottom: 20rpx;
		left: 0;
		right: 0;
	}
</style>